var WINDOW_W = 1200;
var WINDOW_H = 600;
var R = 6;
var TOP = 80;
var LEFT = 10;

const endTime    = new Date(2018, 11, 22);
var curShowTimeS = 0;

var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload = function () {
	var canvas = document.getElementById('c1');
	var ctx = canvas.getContext('2d');
	canvas.width = WINDOW_W;
	canvas.height =  WINDOW_H;
	curShowTimeS = getCurShowSeccon();
	console.log(curShowTimeS);
	var clock1 = setInterval(function () {
		render(ctx);
		update();
	}, 50);
}

function getCurShowSeccon() {
	var curTime = new Date();
	var ret = endTime.getTime() - curTime.getTime();
	s_ret = Math.round(ret/1000); // 得到秒
	return s_ret >= 0 ? s_ret : 0;
}

function update() {

	var dcx = (digit[0][0].length * 2 + 1) * (R + 1);  // 数字的宽
	var dcy = (digit[0].length * 2 + 1) * (R + 1);     // 数字的高
	var dx = (digit[10][0].length * 2 + 1) * (R + 1);     // 冒号的宽

	var nextShowTimeSeconds = getCurShowSeccon();
	var reTime = nextShowTimeSeconds;
	var nextDays = parseInt(reTime/86400);
	reTime -= nextDays*86400;
    var nextHours = parseInt( reTime/3600);
    reTime -=  nextHours * 3600;
    var nextMinutes = parseInt(reTime/60 );
    var nextSeconds = reTime % 60;

   	reTime = curShowTimeS;
	var d = parseInt(reTime/86400);
	reTime -= d*86400;
	var h = parseInt(reTime/3600);
	reTime -= h*3600
	var m = parseInt(reTime/60);
	var s = reTime % 60;

    if( nextSeconds != s ){
    	var px = LEFT; 
		var py = TOP; // 每个数字的起始位置
    	if( parseInt(h/10) != parseInt(nextHours/10) ){
            addBalls(px+dcx*3+dx , py , parseInt(h/10) );
        }
        if( parseInt(h%10) != parseInt(nextHours%10) ){
            addBalls( px+dcx*4+dx , py , parseInt(h/10) );
        }
        if( parseInt(m/10) != parseInt(nextMinutes/10) ){
            addBalls( px+dcx*5+dx*2, py , parseInt(m/10) );
        }
        if( parseInt(m%10) != parseInt(nextMinutes%10) ){
            addBalls( px+dcx*6+dx*2 , py , parseInt(m%10) );
        }
        if( parseInt(s/10) != parseInt(nextSeconds/10) ){
            addBalls( px+dcx*7+dx*3 , py , parseInt(s/10) );
        }
        if( parseInt(s%10) != parseInt(nextSeconds%10) ){
            addBalls( px+dcx*8+dx*3 , py , parseInt(nextSeconds%10) );
        }
    	curShowTimeS = nextShowTimeSeconds;
    	console.log(balls.length);
    }

	updataBalls();
}

function updataBalls(){
	var cut = 0;
    for( var i = 0 ; i < balls.length ; i ++ ){
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        if( balls[i].y >= WINDOW_H-R ){
            balls[i].y = WINDOW_H-R;
            balls[i].vy = - balls[i].vy*0.7;
        }

        if(balls[i].x > 0 && balls[i].x < WINDOW_W + R){
        	balls[cut++] = balls[i];
        }
    }

   	while (balls.length > Math.min(500,cut)) {
   		balls.pop();
   	}
}

function addBalls(x,y,num) {
	for( var i = 0  ; i < digit[num].length ; i ++ )
        for( var j = 0  ; j < digit[num][i].length ; j ++ )
            if( digit[num][i][j] == 1 ){
                var aBall = {
                    x:x + (j+1)*(R+1)*2,
                    y:y + (i+1)*(R+1)*2,
                    g:1.5+Math.random(),
                    vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
                    vy:-5,
                    color: colors[ Math.floor( Math.random()*colors.length ) ]
                }
                balls.push( aBall )
            }
}
/**
 * 绘图
 * @param ctx canvas绘图上下文
 * @return     [description]
 */
function render(ctx) {
	ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // 刷新页面
	var reTime = curShowTimeS;
	var d = parseInt(reTime/86400);
	reTime -= d*86400;
	var h = parseInt(reTime/3600);
	reTime -= h*3600
	var m = parseInt(reTime/60);
	var s = reTime % 60;

	var px = LEFT; 
	var py = TOP; // 每个数字的起始位置

	var dcx = (digit[0][0].length * 2 + 1) * (R + 1);  // 数字的宽
	var dcy = (digit[0].length * 2 + 1) * (R + 1);     // 数字的高
	var dx = (digit[10][0].length * 2 + 1) * (R + 1);     // 冒号的宽

	// 绘制各个数字
	renderDigit(px,py,parseInt(d/100),ctx);
	renderDigit(px+=dcx,py,parseInt((d%100)/10),ctx);
	renderDigit(px+=dcx,py,parseInt(d%10),ctx);
	renderDigit(px+=dcx,py ,10,ctx);
	renderDigit(px+=dx,py,parseInt(h/10),ctx);
	renderDigit(px+=dcx,py ,parseInt(h%10),ctx);
	renderDigit(px+=dcx,py ,10,ctx);
	renderDigit(px+=dx,py ,parseInt(m/10),ctx);
	renderDigit(px+=dcx,py ,parseInt(m%10),ctx);
	renderDigit(px+=dcx,py ,10,ctx);
	renderDigit(px+=dx,py ,parseInt(s/10),ctx);
	renderDigit(px+=dcx,py ,parseInt(s%10),ctx);
	for (var i = 0; i < balls.length; i++) {
		drawBall(balls[i].x,balls[i].y,R,ctx,balls[i].color);
	}
}
/**
 * 绘制一个数字
 * @param  {int} x   x坐标
 * @param  {int} y   y坐标
 * @param  {int} num 数字点整的索引
 * @param  {obj} ctx canvas绘图上下文
 * @return {[type]}     [description]
 */
function renderDigit(x,y,num,ctx) {
	ctx.fillStyle = '#1f6fb5';
	for (var i = 0; i < digit[num].length; i++) {
		for (var j = 0; j < digit[num][i].length; j++) {
			if (digit[num][i][j] == 1) {
				var cx = x + (j+1)*(R+1)*2;
				var cy = y + (i+1)*(R+1)*2;
				ctx.beginPath();
				ctx.arc(cx,cy,R,0,2*Math.PI);
				ctx.closePath();
				ctx.fill();
			}
		}
	}
}
/**
 * 画一个球
 * @param   {int} x    位置横坐标
 * @param   {int} y    位置纵坐标
 * @param   r     半径
 * @param   {obj} ctx 绘图上下文
 * @return {[type]}     [description]
 */
function drawBall(x,y,r,ctx,style="gray") {
	ctx.fillStyle = style;
	ctx.beginPath();
	ctx.arc(x,y,r,0,2*Math.PI);
	ctx.closePath();
	ctx.fill();
}
